import React, { PureComponent, createRef } from 'react'
import { withRouter } from 'react-router-dom'

import BetterScroll from 'components/betterScroll';
import DocumentTitle from 'react-document-title';
import { ComponentLoading } from 'components/loading'

// import { store } from 'store/index'
// import { saveLocationInfo } from 'store/actionCreators'

import { LocationStyle } from './style'
import { Fragment } from 'react';


const AMap = window.AMap

class Location extends PureComponent {
  state = {
    ...this.props,
    activeIndex: ''
  }
  scroll = createRef()
  render() {
    const { pois, regeocode, activeIndex } = this.state
    return (
      <LocationStyle>
        <DocumentTitle title="选择地址" />
        <div id='map-wrapper' style={{ height: 'calc(100vh - 0px)', width: '100vw' }}>

          <input id="tipinput" style={{
            position: 'absolute',
            zIndex: '2',
            height: '.6rem',
            padding: '0 .32rem',
            top: '.12rem',
            left: '.32rem',
            border: 'solid rgb(193, 193, 193) 1px',
            width: '8.7rem',
            borderRadius: '.15rem',
            outlineStyle: 'none',
            color: '#474747',
            fontSize: '.32rem',
            WebkitBoxShadow: ' inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)',
            boxShadow: 'inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)'

          }} placeholder="请输入关键字搜索地址" />

          <div className='location-box'>
            <div className='location-header'>
              <p style={{ width: '.72rem', height: '.08rem', background: '#c1c1c1' }}></p>
            </div>
            <ul className='location-address'>
              <BetterScroll style={{ height: '6.71rem' }} ref={this.scroll}>
                {pois.map((item, index) => {
                  return (
                    <li className='address-li' key={item.id} style={{
                      paddingLeft: activeIndex === index ? '.27rem' : '.4rem',
                      borderLeft: activeIndex === index ? '.13rem solid #EB7C33' : 'none'
                    }} onClick={() => this.changeIndex(index, item)}>
                      <p>
                        <span style={{ fontSize: '.4rem', color: '#474747', fontWeight: '800' }}>{item.name}</span>
                        <br />
                        <span className='location_-___--___---__'
                          style={{
                            fontSize: '.32rem',
                            color: "var(--common-font-color)",
                            opacity: '.5',
                          }}>{regeocode.addressComponent.province + regeocode.addressComponent.city + regeocode.addressComponent.district + item.address}
                        </span>
                      </p>
                    </li>
                  )
                })}
                <li style={{ height: '5px', width: '100%' }}></li>
              </BetterScroll>
            </ul>
          </div>
        </div>
      </LocationStyle>
    )
  }

  componentDidMount = () => {

    let AMapUI = window.AMapUI
    let that = this
    AMap.plugin(["AMap.PlaceSearch", 'AMap.Geocoder', 'AMap.ToolBar'], () => {
      this.placeSearch = new AMap.PlaceSearch({
        pageSize: 10,
        pageiNDEX: 1
      })
      this.geocoder = new AMap.Geocoder()
    })

    let map = new AMap.Map('map-wrapper', {
      zoom: 17,
      scrollWheel: false,
      center: [that.props.lng, that.props.lat],
    })

    let auto = new AMap.Autocomplete({
      input: "tipinput"
    });

    let placeSearch = new AMap.PlaceSearch({
      map: map
    });
    AMap.event.addListener(auto, "select", (e) => {
      placeSearch.setCity(e.poi.adcode);
      placeSearch.search(e.poi.name);  //关键字查询查询
    });//注册监听，当选中某条记录时会触发



    AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
      this.positionPicker = new PositionPicker({
        mode: 'dragMap',
        map: map,
      })

      this.positionPicker.on('success', (res) => {
        this.showInfoDragend({ lat: res.position.Q, lng: res.position.R })
      })

      this.positionPicker.on('fail', (err) => {
        console.log('fail', err)
      })

      this.positionPicker.start()
      map.panBy(0, 1)
      map.addControl(new AMap.ToolBar({
        liteStyle: true
      }))
    })
    this.scroll.current.BScroll.refresh()
  }

  showInfoDragend = (e) => {
    let lnglat = [e.lng, e.lat]
    this.geocoder.getAddress(lnglat, (status, result) => {
      if (status === 'complete' && result.info === 'OK') {
        this.placeSearch.searchNearBy('', lnglat, 300, (status, res) => {
          this.setState({
            regeocode: result.regeocode,
            pois: res.poiList.pois
          }, () => {
            this.scroll.current.BScroll.scrollTo(0, 0, 1000)
            this.scroll.current.BScroll.refresh()
          })
        })
      }
    })
  }

  changeIndex(index, item) {
    const { addressComponent } = this.state.regeocode

    console.log( 'hhjjj',addressComponent )


    return

    // const newRegeocode = {
    //   regeocode: addressComponent.province + addressComponent.city + addressComponent.district,
    //   province: addressComponent.province,
    //   district: addressComponent.district,
    //   city: addressComponent.city
    // }
    // const setStoreData = Object.assign({}, item, newRegeocode)
    // store.dispatch(saveLocationInfo(setStoreData))
    // this.setState({ activeIndex: index }, () => {
    //   this.props.history.go(-1)
    // })
  }
}



function withLocation(WappendComponent) {
  return class extends PureComponent {
    constructor(props) {
      super(props)
      this.state = {
        lat: '',
        lng: ''
      }
    }
    onComplete = data => {
      let AMap = window.AMap

      let lnglat = [data.position.getLng(), data.position.getLat()]
      AMap.plugin(["AMap.PlaceSearch", 'AMap.Geocoder'], () => {
        this.placeSearch = new AMap.PlaceSearch({
          pageSize: 10,
          pageiNDEX: 1
        })
        let geocoder = new AMap.Geocoder()
        geocoder.getAddress(lnglat, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            this.placeSearch.searchNearBy('', lnglat, 200, (status, res) => {
              this.setState({
                lat: data.position.getLat(),
                lng: data.position.getLng(),
                pois: res.poiList.pois,
                regeocode: result.regeocode
              })
            })
          }
        })
      })
    }

    onError(data) {
      console.log(data)
    }

    UNSAFE_componentWillMount() {
      let that = this
      // let AMap = window.AMap

      AMap.plugin('AMap.Geolocation', function () {
        that.geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,//是否使用高精度定位，默认:true
          timeout: 2000,          //超过10秒后停止定位，默认：5s
          zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
        })
        that.geolocation.getCurrentPosition(function (status, result) {
          if (status === 'complete') {
            that.onComplete(result)
          } else {
            that.onError(result)
          }
        })
      })
    }
    render() {
      return (
        <Fragment>
          { this.state.lat === "" && <ComponentLoading />}
          { this.state.lat !== '' && <WappendComponent {...this.state} />}
        </Fragment>
      )

    }
  }
}

const enhanceLocation = withLocation(withRouter(Location))


export default enhanceLocation;

